<!-- src/views/SearchResult.vue -->
<script setup>
import { ref } from 'vue'
import toolApi from '@/api/tool'
import request from "@/utlis/request.js";

const baseUrl = request.defaults.baseURL + "/images/";
const keyword = ref('')
const searchResults = ref([])

const handleSearch = async () => {
  if (!keyword.value.trim()) {
    searchResults.value = []
    return
  }
  const res = await toolApi.search(keyword.value) // 你需要后端实现支持模糊搜索
  searchResults.value = res
}
</script>

<template>
  <div>
    <el-input
        v-model="keyword"
        placeholder="请输入关键词搜索"
        style="width: 300px; margin-bottom: 20px"
        @keyup.enter="handleSearch"
    />
    <el-button type="primary" @click="handleSearch">搜索</el-button>

    <div v-if="searchResults.length" style="margin-top: 20px;">
      <div
          v-for="tool in searchResults"
          :key="tool.toolId"
          style="border: 1px solid #ccc; padding: 10px; margin-bottom: 10px;"
      >
        <img :src="baseUrl+ tool.icon" alt="icon" style="width: 24px; height: 24px;" />
        <h4>{{ tool.toolName }}</h4>
        <p>分类：{{ tool.categoryName }}</p>
        <a :href="tool.link" target="_blank">打开工具</a>
      </div>
    </div>

    <div v-else style="margin-top: 20px;" v-if="keyword">
      暂无搜索结果
    </div>
  </div>
</template>
